<div class="screen-area">
  <div class="d-flex justify-content-between align-items-center">
    <h1 class="font-weight-light" id="dlpSensors-title">
      {{ 'sidebar.nav.DLP_SENSORS' | translate }}
    </h1>
    <div class="d-flex align-items-center justify-content-end">
      <button
        mat-button
        aria-label="export WAF SENSORS"
        *appDisplayControl="'review_rule'"
        (click)="exportDlpSensors()">
        <em class="eos-icons icon-18">download</em>
        {{ 'admissionControl.EXPORT' | translate }}
      </button>
      <button
        mat-button
        aria-label="import WAF SENSORS"
        (click)="openImportDlpSensorsModal()"
        *appDisplayControl="'write_dlp_rule'">
        <em class="eos-icons icon-18">upload</em>
        {{ 'admissionControl.IMPORT' | translate }}
      </button>
      <app-loading-button
        (btnClick)="refresh()"
        [disabled]="!!(refreshing$ | async)"
        [appearance]="'mat-button'"
        [buttonClasses]="'d-flex justify-content-center align-items-center'"
        [iconClasses]="'eos-icons icon-18'"
        [iconName]="'refresh'"
        [id]="'waf-refresh-button'"
        [loading]="!!(refreshing$ | async)"
        [text]="'network.REFRESH' | translate"
        [type]="'button'">
      </app-loading-button>
    </div>
  </div>
  <ng-container>
    <app-adjustable-div [minHeightOne]="163" [minHeightTwo]="140">
      <ng-container *appContainerOne="let height">
        <mat-card [ngStyle]="{ height: height + 'px' }" class="pt-0">
          <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex justify-content-start align-items-center">
              <span class="font-weight-bold text-info">
                <span *ngIf="filtered">
                  {{ 'enum.FOUND' | translate }}
                  {{ filteredCount }}&nbsp;/
                </span>
                <span *ngIf="!filtered">
                  {{ 'enum.OUT_OF' | translate }}&nbsp;
                </span>
                {{ dlpSensorsCount }}
              </span>
            </div>
            <div class="d-flex justify-content-end align-items-center">
              <button
                mat-stroked-button
                aria-label="add sensor"
                class="mr-4"
                (click)="openAddEditDlpSensorModal()"
                *appDisplayControl="'write_dlp_rule'">
                <em class="eos-icons icon-18">add_circle</em>
                {{ 'admissionControl.INSERT' | translate }}
              </button>
              <app-quick-filter
                class=""
                [gridOptions]="gridOptions4Sensors"
                (filterCountChange)="filterCountChanged($event)"
                [showCount]="false"
                [filteredCount]="filteredCount"
                [count]="dlpSensors.length">
              </app-quick-filter>
            </div>
          </div>
          <div class="">
            <ag-grid-angular
              id="dlp-sensors-grid"
              style="width: 100%"
              [ngStyle]="{ height: height - 90 + 'px' }"
              class="ag-theme-balham"
              [gridOptions]="gridOptions4Sensors"
              [rowData]="dlpSensors"
              [context]="context">
            </ag-grid-angular>
          </div>
        </mat-card>
      </ng-container>
      <ng-container *appContainerTwo="let height">
        <mat-card [ngStyle]="{ height: height + 'px' }" *ngIf="selectedSensor">
          <div>
            <label class="panel-text-title mt-sm">
              {{ selectedSensor.name | shortenFromMiddle: 30 }}
            </label>
          </div>
          <div class="row margin-top-m">
            <div class="col-sm-3" style="position: relative">
              <button
                *ngIf="!isPredefine && isWriteDLPSensorAuthorized"
                style="position: absolute; z-index: 10; right: 17px; top: 4px"
                (click)="openAddDlpRuleModal()">
                <em
                  class="eos-icons icon-18 d-flex justify-content-center align-items-center"
                  >add</em
                >
              </button>
              <ag-grid-angular
                id="dlp-rules-grid"
                style="width: 100%"
                [ngStyle]="{ height: height - 90 + 'px' }"
                class="ag-theme-balham"
                [gridOptions]="gridOptions4Rules"
                [context]="context">
              </ag-grid-angular>
            </div>
            <div class="col-sm-9">
              <ag-grid-angular
                id="dlp-patterns-grid"
                style="width: 100%"
                [ngStyle]="{ height: height - 90 + 'px' }"
                class="ag-theme-balham"
                [gridOptions]="gridOptions4Patterns"
                [context]="context">
              </ag-grid-angular>
            </div>
          </div>
        </mat-card>
      </ng-container>
    </app-adjustable-div>
  </ng-container>
</div>
